<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户登录</title>
</head>
<body>
<div style=" background: #999999;margin: 0 auto;margin-top: 100px; width: 400px;height: 300px">
    <h4 style="margin-left:170px;padding-top: 30px;">用户登录</h4>
        <div>
            <div>
                <div style="margin-left: 50px">
                    <label style="color: #ffffff;">用户名：</label>
                    <input type="text" id="username">
                </div>
                <div style="margin-left: 66px;margin-top: 20px">
                    <label  style="color: #ffffff;">密码：</label>
                    <input type="password" id="password"  >
                </div>
            </div>
            <div style="margin-top: 20px; margin-bottom: 10px; text-align: center;">
                <button type="button" onclick="login()" style="text-align: center;">登录</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function login(){
        //1.获取用户名密码验证码
        var username=$("#username").val();
        var password=$("#password").val();
        //2.组成Jasonp格式
        var data = {
            username : username,
            password : password
        }
        //3.将数据通过AJAX传到servet中
        $.ajax({
            type : "post", //type的类型有两种post，get
            url : '<%=path%>'+"/v1/users/login",
            data : data,
            dataType : "jsonp",
            jsonp : "jsoncallback",
            success : function(result) {
                if(result=="true"){
                    sweetAlert("登录成功");
                }else if(result=="wrong"){
                    sweetAlert("用户名或密码错误");
                }
                else if(result=="false"){
                    sweetAlert("验证码错误");
                }
            }
        })
    }
</script>
</html>